<template>
  <div class="container">
    <cell-group>
      <cell title="基础用法">
        <stepper v-model="value1" slot="right-wrap" />
      </cell>
      <cell title="步长设置">
        <stepper v-model="value2" slot="right-wrap" :step="5"/>
      </cell>
      <cell title="禁用状态">
        <stepper v-model="value3" slot="right-wrap" disabled/>
      </cell>
      <cell title="自定义大小">
        <stepper v-model="value4" slot="right-wrap" size="23px"/>
      </cell>
      <cell title="圆角风格">
        <stepper v-model="value5" slot="right-wrap" round size="23px"/>
      </cell>
    </cell-group>
  </div>
</template>

<script>
import CellGroup from "../../components/cell-group";
import Cell from "../../components/cell";
import Stepper from "../../components/stepper";
export default {
  components: {
    CellGroup,
    Cell,
    Stepper,
  },
  data() {
    return {
      value1: 1,
      value2: 1,
      value3: 1,
      value4: 1,
      value5: 1,
    };
  },
  methods: {
    
  },
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
}
</style>